<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' :eCharts3State='eCharts3State' :chartsListState='chartsListState' :eCharts4State='eCharts4State'  :tableState='tableState'>
            <div slot="eCharts1" >
                <div class="charts-title">
                    <div>新增用户留存趋势</div>
                    <div class="note">近30日</div>
                </div>
                <div class="charts-display" v-loading='trendChart1Loading'>
                    <trendChart width='100%' height='100%' id="trendChart1" :option='trendChart1Option'></trendChart>
                </div>
            </div>
            <!-- <div slot="chartsList" >
                <el-row :gutter="20">
                    <el-col :span="12" class="data-item">
                        <div class="item">
                            <div class="charts-title">
                                <div>登录后10日用户回访趋势</div>
                                <div class="note">{{nearlyTenDays}}   按日</div>
                            </div>
                            <div class="charts-display"  v-loading='trendChart3Loading'>
                                <trendChart width='100%' height='100%' id="trendChart3" :option='trendChart3Option'></trendChart>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12" class="data-item">
                        <div class="item">
                            <div class="charts-title">
                                <div>活跃用户留存概况</div>
                                <div class="note">近30日</div>
                            </div>
                            <div class="charts-display" v-loading='trendChart4Loading'>
                                <trendChart width='100%' height='100%' id="trendChart4" :option='trendChart4Option'></trendChart>
                            </div>
                        </div>
                    </el-col> 
                </el-row>
            </div> -->
            <div slot="eCharts4" >
                <div class="charts-title">
                    <div>活跃用户留存趋势</div>
                    <div class="note">近30日</div>
                </div>
                <div class="charts-display" v-loading='trendChart2Loading'>
                   <trendChart width='100%' height='100%' id="trendChart2" :option='trendChart2Option'></trendChart>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import trendChart from 'components/Charts/trendChart';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import { findNewUserRetention, findActiveUserRetention } from 'api/pingtaifenxi';
    export default{
        name: 'analyzeView',
        components: {trendChart, echartsLayout},
        data() {
            return {
                trendChart1Loading: false,
                trendChart2Loading: false,
                formState: true,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: false,
                eCharts4State: false,
                tableState: true,
                nearlyTenDays: null,
                trendChart1Option: null,
                trendChart2Option: null
            }
        },
        created() {
            this.getTrendChart1();
            this.getTrendChart2();
        },
        methods: {
            // 新增用户留存趋势
            getTrendChart1() {
                this.trendChart1Loading = true;
                let endDate = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD');
                let startDate = moment(new Date()).add(-30, 'days').format('YYYY-MM-DD'); // 近30天
                findNewUserRetention(startDate, endDate).then(res => {
                    this.trendChart1Loading = false;
                    let legend=['第1日', '第7日', '第14日', '第30日']
                    let xAxisData=[];
                    let series=[
                        {
                            name: '第1日',
                            type: 'line',
                            areaStyle: {normal: {}},
                            data: []
                        },
                        {
                            name: '第7日',
                            type: 'line',
                            areaStyle: {normal: {}},
                            data: []
                        },
                        {
                            name: '第14日',
                            type: 'line',
                            areaStyle: {normal: {}},
                            data: []
                        },
                        {
                            name: '第30日',
                            type: 'line',
                            areaStyle: {normal: {}},
                            data: []
                        }
                    ];
                    if (res.data.content.list) {
                        res.data.content.list.reverse().forEach(val => {
                            xAxisData.push(val.date)
                            series[0].data.push(val.day1)
                            series[1].data.push(val.day7)
                            series[2].data.push(val.day14)
                            series[3].data.push(val.day30)
                        })
                    }
                    this.trendChart1Option = {
                        color: ['#0098E1', '#728AC3', '#FFCF3C', '#F3AD6E', '#F17C7C', '#E94C81', '#A562B1', '#7A56B9', '#625AD1'],
                        tooltip: {
                            trigger: 'axis'
                            // formatter: '{a0}: {c0}%<br>{a1}: {c1}%<br>{a2}: {c2}%<br>{a3}: {c3}%'
                        },
                        legend: {
                            data: legend
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisData 
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '留存率',
                                axisLabel: {
                                    formatter: '{value} %'
                                }
                            }
                        ],
                        series
                    };
                }).catch(() => {
                    this.trendChart1Loading = false;
                });
            },

            // 活跃用户留存趋势
            getTrendChart2() {
                this.trendChart2Loading = true;
                let endDate = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD');
                let startDate = moment(new Date()).add(-30, 'days').format('YYYY-MM-DD'); // 近30天
                findActiveUserRetention(startDate, endDate).then(res => {
                    this.trendChart2Loading = false;
                    let legend=['第1日', '第7日', '第14日', '第30日']
                    let xAxisData=[];
                    let series=[
                        {
                            name: '第1日',
                            type: 'line',
                            areaStyle: {normal: {}},
                            data: []
                        },
                        {
                            name: '第7日',
                            type: 'line',
                            areaStyle: {normal: {}},
                            data: []
                        },
                        {
                            name: '第14日',
                            type: 'line',
                            areaStyle: {normal: {}},
                            data: []
                        },
                        {
                            name: '第30日',
                            type: 'line',
                            areaStyle: {normal: {}},
                            data: []
                        }
                    ];
                    res.data.content.forEach(val => {
                        xAxisData.push(val.date)
                        series[0].data.push(val.day1)
                        series[1].data.push(val.day7)
                        series[2].data.push(val.day14)
                        series[3].data.push(val.day30)
                    })
                    this.trendChart2Option = {
                        color: ['#0098E1', '#728AC3', '#FFCF3C', '#F3AD6E', '#F17C7C', '#E94C81', '#A562B1', '#7A56B9', '#625AD1'],
                        tooltip: {
                            trigger: 'axis'
                            // formatter: '{a0}: {c0}%<br>{a1}: {c1}%<br>{a2}: {c2}%<br>{a3}: {c3}%'
                        },
                        legend: {
                            data: legend
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisData 
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '留存率',
                                axisLabel: {
                                    formatter: '{value} %'
                                }
                            }
                        ],
                        series
                    };
                }).catch(() => {
                    this.trendChart2Loading = false;
                });
               
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
        .el-select {
            float: right;
        }
        .note {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            line-height: 14px;
            color: #999999;
        }
    }
</style>                     